<script setup>
import { onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

onMounted(() => {
  // 这是主要的引入密钥
  window._AMapSecurityConfig = {
    securityJsCode: "ad3b412838f9c9558233a12079de4208", // 密钥
  };
  AMapLoader.load({
    key: "4220e9fd8cd1265027376b1f44b6313b", // 高德地图API Key
    version: "1.4.15",
    plugins: ["AMap.DistrictSearch"], // 引入行政区划查询插件
  })
    .then((AMap) => {
      // 创建地图实例
      const map = new AMap.Map("MapContainer", {
        zoom: 11, // 设置地图初始缩放级别
        center: [100.5753, 25.8254], // 设置地图中心为宾川县
        mapStyle: "amap://styles/dark", // 设置地图为暗黑主题
        zooms: [9.5, 16], // 设置地图允许的缩放级别范围
      });

      // 隐藏高德地图 Logo
      map.setStatus({ logoControl: false });

      // 创建 DistrictSearch 实例
      let opts = {
        level: "district", // 查询级别为区县
        extensions: "all", // 返回边界数据
        subdistrict: 1, // 查询下一级行政区
      };
      // 创建DistrictSearch对象
      const district = new AMap.DistrictSearch(opts);

      // 查询宾川县边界及其下属乡镇
      district.search("宾川县", (status, result) => {
        console.log(status, result, result.boundaries);

        if (status == "complete" && result.info === "OK") {
          // 绘制宾川县边界数据
          const bincuan = result.districtList[0];
          // 绘制宾川县边界（金色，极光效果较强）
          drawBoundary(map, bincuan.boundaries, "#FFD700");
           map.setFitView();
          // 查询宾川县下属乡镇
          const subDistricts = bincuan.districtList || [];
          subDistricts.forEach((subDistrict) => {
            district.search(subDistrict.name, (subStatus, subResult) => {
              if (subStatus === "complete" && subResult.boundaries) {
                // 绘制乡镇边界（金色，极光效果较弱）
                drawBoundary(
                  map,
                  subResult.boundaries,
                  "#FFD700",
                  "rgba(255, 215, 0, 0.2)"
                );
              }
            });
          });

          // 调整地图视野以适应所有边界
          map.setFitView();
        } else {
          console.error("获取宾川县边界失败：", result);
        }
      });

      // 绘制边界的函数
      function drawBoundary(map, boundaries, strokeColor, fillColor) {
        boundaries.forEach((boundary) => {
          const polygon = new AMap.Polygon({
            path: boundary, // 边界路径
            strokeColor: strokeColor, // 边框颜色
            strokeWeight: 1, // 边框宽度
            fillColor: fillColor, // 填充颜色
            fillOpacity: 0.01, // 填充透明度（设置为较低值，确保地图标注可见）
            zIndex: 11, // 设置较低的 zIndex，确保地图标注在多边形之上
          });
          map.add(polygon); // 将多边形添加到地图
        });
      }
    })
    .catch((error) => {
      console.error("加载高德地图失败：", error);
    });
});
</script>

<template>
  <div>
    高德地图Demo-宾川县及乡镇轮廓
    <div id="MapContainer"></div>
  </div>
</template>

<style scoped>
#MapContainer {
  width: 100%;
  height: 800px; /* 根据需要调整高度 */
}
</style>
